<script setup>
import { useRouter } from 'vue-router'
import { useDarkModeStore } from '@/stores/darkMode.js'
import { gradientBgPurplePink } from '@/colors.js'
import SectionMain from '@/components/SectionMain.vue'
import CardBox from '@/components/CardBox.vue'
import LayoutGuest from '@/layouts/LayoutGuest.vue'
import { onMounted, ref, nextTick } from 'vue'


const styles = ['white', 'basic']

const darkModeStore = useDarkModeStore()

darkModeStore.set(false)

const router = useRouter()



const handleStyleChange = (slug) => {
  document.documentElement.classList.forEach((token) => {
    if (token.indexOf('style') === 0) {
      document.documentElement.classList.replace(token, `style-${slug}`)
    }
  })

  router.push('/dashboard')
}

// 渲染卡片飞入动画
const cardBoxRefs = ref([]) // 初始化为空数组
const setCardBoxRef = (el, index) => {
  if (!cardBoxRefs.value[index] && el) {
    cardBoxRefs.value[index] = el
  }
}

const animateBoxesIn = () => {
  cardBoxRefs.value.forEach((el, index) => {
    if (el && el.cardContent) {
      setTimeout(() => {
        el.cardContent.style.transform = 'translateX(0)'
      }, index * 150) // 每个间隔 150ms 出现
    }
  })
}

// 文字掉落动画
const dropText = ref(null)
onMounted(async () => {
  await nextTick()
  animateBoxesIn()

  // 启动动画
  dropText.value.style.animationPlayState = 'running'
})
</script>

<template>
  <LayoutGuest>
    <div :class="gradientBgPurplePink" class="flex min-h-screen items-center justify-center">
      <SectionMain>
        <div class="textContain">
          <span ref="dropText" class="drop-text">
            <h1 class="text-4xl md:text-5xl text-center text-white font-bold mt-12 mb-3 lg:mt-0">
              Pick a style&hellip;
            </h1>
            <h2 class="text-xl md:text-xl text-center text-white mb-12">
              Style switching with a single
              <code class="px-1.5 py-0.5 rounded-sm bg-white/20">modifier</code>
            </h2>
          </span>
        </div>
        <div class="grid gap-6 grid-cols-1 lg:grid-cols-2 px-6 max-w-6xl mx-auto">
          <CardBox v-for="(style, index) in styles" :key="style" :ref="(el) => setCardBoxRef(el, index)"
            class="cursor-pointer bg-gray-50 CardBox" :class="{ leftBox: index === 0, rightBox: index !== 0 }"
            is-hoverable @click="handleStyleChange(style)">
            <div class="mb-3 md:mb-6">
              <img class="cardBox-Img  rounded-xl"
                :src="`https://static.justboil.me/templates/one/small/${style}-v3.png`" width="1280" height="720" />
            </div>

            <h1 class="text-xl md:text-2xl font-black capitalize">
              {{ style }}
            </h1>
            <h2 class="text-lg md:text-xl">& Dark mode</h2>
          </CardBox>
        </div>
      </SectionMain>
    </div>
  </LayoutGuest>
</template>


<style scoped>
/* .CardBox.leftBox {
  background-color: bisque;
  transform: translateX(-1000px);
  transition: all 0.5s ease-in-out;
}

.CardBox.rightBox {
  background-color: bisque;
  transform: translateX(1000px);
  transition: all 0.5s ease-in-out;
} */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: auto;
}

.drop-text {
  display: block;
  opacity: 0;
  transform: translateY(-100px);
  animation: drop 1s ease-out forwards;
  animation-play-state: paused;
  /* 初始暂停动画 */
}

/* 定义掉落动画 */
@keyframes drop {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  80% {
    opacity: 1;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.cardBox-Img:hover {
  transform: scale(2) !important;
  transition: all 0.5s ease-in-out;
}
</style>
